<template>
	<div class="header-box" v-show="isshow">
		<div class="left-icon">
			<span v-if="showback" @click="back" class="icon-back"></span>
		</div>
		<div class="header-tittle">
			<span v-if="showinput">
          <cus-input></cus-input>
        </span>
			<span v-if="!showinput">{{tittle}}</span>
		</div>
		<div class="right-icon">
			<span v-if="showmore" class="icon"></span>
			<span v-if="clear" class="clear">清空</span>
		</div>
	</div>
</template>

<script>
	// import cusInput from 'common/cus-input'
	export default {
		data() {
			return {
				isshow:true
			}
		},
		props: {
			showright: {
				type: Boolean,
				default: false
			},
			showleft: {
				type: Boolean,
				default: false
			},
			showinput: {
				type: Boolean,
				default: false
			},
			tittle: {
				type: String,
				default: '标题'
			},
			showback: {
				type: Boolean,
				default: true
			},
			showmore: {
				type: Boolean,
				default: false
			},
			clear: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			back() {
//				this.isshow = false
				this.$router.goBack()
			}
		},
		components: {
			// cusInput
		}
	}
</script>

<style lang="less" scoped>
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.header-box {
		position: fixed;
		border-bottom: 1px solid @border-color;
		top: 0;
		left: 0;
		width: 100%;
		.h(100);
		.lh(100);
		background-color: #ffffff;
		color: @base-black-color;
		.fs(@base-header-size);
		display: flex;
		font-weight: bold;
		font-size: 18px;
		z-index: 999;
		.left-icon {
			position: relative;
			flex: 1;
			.icon-back {
				position: absolute;
				display: inline-block;
				.w(40);
				.h(40);
				.left(25);
				.top(30);
				background-image: url("../assets/imgs/w-back2.svg");
				background-size: cover;
			}
		}
		.header-tittle {
			flex: 3;
		}
		.right-icon {
			position: relative;
			flex: 1;
			.icon {
				position: absolute;
				display: inline-block;
				.w(50);
				.h(50);
				.right(25);
				.top(25);
				// background-image: url("../assets/imgs/more2.svg");
				background-size: cover;
			}
		}
	}
	
	.clear {
		font-size: 14px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}
</style>